<template>
  <div class="flex items-center justify-center space-x-4 text-sm">
    <!-- 总数显示 -->
    <span class="text-[#606266]">Total {{ total }}</span>

    <!-- 每页显示数量选择器 -->
    <div class="relative inline-block">
      <select
        v-model="currentPageSize"
        class="appearance-none rounded border border-[#DCDFE6] px-2 py-1 pr-8 text-[#606266] outline-none hover:border-[#409EFF]"
        @change="handlePageSizeChange"
      >
        <option v-for="size in pageSizes" :key="size" :value="size">
          {{ size }}/page
        </option>
      </select>
      <div
        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-[#C0C4CC]"
      >
        <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
          <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" />
        </svg>
      </div>
    </div>

    <!-- 上一页 -->
    <button
      class="rounded px-2 text-[#606266] hover:text-[#409EFF] disabled:cursor-not-allowed disabled:text-[#C0C4CC]"
      :disabled="currentPage <= 1"
      @click="handlePageChange(currentPage - 1)"
    >
      <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
        <path
          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
        />
      </svg>
    </button>

    <!-- 页码 -->
    <div class="flex space-x-2">
      <button
        v-for="page in displayPages"
        :key="page"
        class="min-w-[24px] rounded px-2 py-1 transition-colors"
        :class="
          page === currentPage
            ? 'bg-[#409EFF] text-white'
            : 'text-[#606266] hover:text-[#409EFF]'
        "
        @click="handlePageChange(page)"
      >
        {{ page }}
      </button>

      <!-- 省略号 -->
      <span v-if="showEndEllipsis" class="px-2 text-[#606266]">...</span>
    </div>

    <!-- 下一页 -->
    <button
      class="rounded px-2 text-[#606266] hover:text-[#409EFF] disabled:cursor-not-allowed disabled:text-[#C0C4CC]"
      :disabled="currentPage >= totalPages"
      @click="handlePageChange(currentPage + 1)"
    >
      <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
        <path
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
        />
      </svg>
    </button>

    <!-- 跳转 -->
    <div class="flex items-center space-x-2">
      <span class="text-[#606266]">Go to</span>
      <input
        v-model.number="jumpPage"
        type="number"
        class="w-16 rounded border border-[#DCDFE6] px-2 py-1 text-center outline-none hover:border-[#409EFF]"
        min="1"
        :max="totalPages"
        @keyup.enter="handleJumpPage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  total: {
    type: Number,
    required: true,
  },
  pageSize: {
    type: Number,
    default: 12,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSizes: {
    type: Array,
    default: () => [12, 24, 36, 48],
  },
})

const emit = defineEmits(['update:currentPage', 'update:pageSize'])

const currentPageSize = ref(props.pageSize)
const jumpPage = ref(props.currentPage)

// 计算总页数
const totalPages = computed(() =>
  Math.ceil(props.total / currentPageSize.value)
)

// 计算显示的页码
const displayPages = computed(() => {
  const pages = []
  const maxDisplayPages = 7 // 最多显示的页码数

  if (totalPages.value <= maxDisplayPages) {
    // 总页数较少时，显示所有页码
    for (let i = 1; i <= totalPages.value; i++) {
      pages.push(i)
    }
  } else {
    // 总页数较多时，显示部分页码
    pages.push(1)

    let start = Math.max(props.currentPage - 2, 2)
    let end = Math.min(props.currentPage + 2, totalPages.value - 1)

    if (start > 2) pages.push('...')
    for (let i = start; i <= end; i++) {
      pages.push(i)
    }
    if (end < totalPages.value - 1) pages.push('...')
    pages.push(totalPages.value)
  }

  return pages
})

// 处理页码变化
const handlePageChange = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    emit('update:currentPage', page)
    jumpPage.value = page
  }
}

// 处理每页显示数量变化
const handlePageSizeChange = () => {
  emit('update:pageSize', currentPageSize.value)
  // 重置到第一页
  emit('update:currentPage', 1)
  jumpPage.value = 1
}

// 处理跳转页面
const handleJumpPage = () => {
  if (jumpPage.value >= 1 && jumpPage.value <= totalPages.value) {
    handlePageChange(jumpPage.value)
  } else {
    jumpPage.value = props.currentPage
  }
}
</script>
